import React, { useCallback, useEffect, useState } from 'react';
import './App.css';
import { PreData, RelicsSuit } from './data';

const Enums = {
	hp: "生命值",
	fixedhp: "生命值固定值",
	hpRate: "生命值百分比",
	type: "类型",
	defence: "防御力",
	defenceRate: "防御力百分比",
	attack: "攻击力固定值",
	atRate: "攻击力百分比",
	criticalRate: "暴击率",
	criticalStrike: "爆伤",
	treatment: "治疗",
	charging: "元素充能",
	reaction: "元素精通",
	
	damageRate: "伤害增加",
	fire: "火",
	electric: "雷",
	water: "水",
	ice: "冰",
	wind: "风",
	rock: "岩",
	physicsReward: "物理",

	base: "白字",
	magic: "法器",
	sword: "单手剑",
	glaive: "大剑",
	arch: "弓",
	longHandle: "长柄",

	flower: "生之花",
	plume: "死之羽",
	sandglass: "时之沙",
	cann: "空之杯",
	header: "理之冠",
	effect: "描述",
	addition: "加成",
	skill: "技能",
}
const CLIPDATA_SECOND = {
    attack: 19,
    reaction : 23,
    atRate: 5.8, 
    hpRate: 5.8, 
    fixedhp: 299,
    criticalRate: 3.9,
    criticalStrike: 7.8,
    defence: 23,
    defenceRate: 7.3,
    charging: 7.3
}
const CLIPDATA_MAIN = {
    fixedhp: 4780,
    attack: 311,
    atRate: 46.6,hpRate: 46.6,defenceRate: 58.3,charging: 58.3,
    reaction: 187, 
    physicsReward: 58.3, fire: 46.6, electric: 46.6, water: 46.6, ice: 46.6, wind: 46.6, rock: 46.6,
	criticalRate: 31.1, criticalStrike: 62.2
}
function Weapon(props) {
	const [ShowCreateW, setShowCreateW] = useState(false)
	const [WeaponInfo, setWeaponInfo] = useState({ type: "magic" })
	let { Weapons, changeWeapons } = props;
	const createWeapon = () => {
		setWeaponInfo({ type: "magic" })
		setShowCreateW(true);
	}
	const CanelcreateWeapon = (e) => {
		e.stopPropagation();
		setShowCreateW(false);
	}
	const handleChangeInput = (e) => {
		let tmp = {};
		for (const key in WeaponInfo) {
			tmp[key] = WeaponInfo[key]
		}
		if (/\d/ig.test(e.target.value)) {
			e.target.value = Math.abs(parseFloat(e.target.value || 0)) - 0
		}
		tmp[e.target.dataset.key] = e.target.value;
		setWeaponInfo(tmp)
	}

	const saveData = () => {
		if (!WeaponInfo.id) { WeaponInfo.id = new Date().getTime() }
		// Weapons里查找是否有这个id
		let weapon = Weapons.find(v => v.id === WeaponInfo.id)
		if (weapon) {  // 编辑
			for (const key in WeaponInfo) {
				weapon[key] = WeaponInfo[key]
			}
			changeWeapons([...Weapons])
		} else {  // 新增
			let tmp = {};
			for (const key in WeaponInfo) {
				tmp[key] = WeaponInfo[key]
			}
			changeWeapons([...Weapons, tmp])
		}
		setWeaponInfo({ type: "magic" })
		setShowCreateW(false);
	}

	const editWeapon = (id) => {
		let weapon = Weapons.find(v => v.id === id)
		let tmp = {};
		for (const key in weapon) {
			tmp[key] = weapon[key]
		}
		setWeaponInfo(tmp)
		setShowCreateW(true);
	}

	const handleDlete = (id) => {
		let weapon = Weapons.filter(v => v.id !== id)
		changeWeapons(weapon)
	}

	return (
		<div className="weapon_container">
			{
				Weapons.map(item => {
					return (
						<div className="weapon_box" key={item.id}>
							<div className="weapon_box_head">
								<div className="weapon_box_head_item">名称：{item.name || "未编辑"}</div>
								<div className="weapon_box_head_item">基础攻击：{item.base || 0}</div>
							</div>
							<div className="weapon_box_body">{
								Object.keys(item).map(v => {
									if (!/id|name|base/ig.test(v)) {
										return (
											<div key={v}>
												{Enums[v]} : {Enums[item[v]] ? Enums[item[v]] : item[v]}
											</div>
										)
									} else {
										return null
									}

								})
							}</div>
							<div className="weapon_box_btn">
								<div onClick={() => editWeapon(item.id)} className="weapon_box_edit">编辑</div>
								<div onClick={() => handleDlete(item.id)} className="weapon_box_dele">删除</div>
							</div>
						</div>
					)
				})
			}
			<div className={ShowCreateW ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox">
						<button onClick={CanelcreateWeapon} className="font_small button button_red righttop">取消</button>
						<div className="InputsBox_item"><div className="InputsBox_item_font">名称：</div><input onChange={handleChangeInput} data-key="name" value={WeaponInfo.name || ""} className="input" type="text" /> </div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">类型：</div>
							<select onChange={handleChangeInput} data-key="type" value={WeaponInfo.type || ""} className="input">
								<option value="magic">{Enums["magic"]}</option>
								<option value="sword">{Enums["sword"]}</option>
								<option value="glaive">{Enums["glaive"]}</option>
								<option value="arch">{Enums["arch"]}</option>
								<option value="longHandle">{Enums["longHandle"]}</option>
							</select>
						</div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">白字：</div><input onChange={handleChangeInput} data-key="base" value={WeaponInfo.base || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">攻击：</div><input onChange={handleChangeInput} data-key="atRate" value={WeaponInfo.atRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">防御：</div><input onChange={handleChangeInput} data-key="defenceRate" value={WeaponInfo.defenceRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">精通：</div><input onChange={handleChangeInput} data-key="reaction" value={WeaponInfo.reaction || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">充能：</div><input onChange={handleChangeInput} data-key="charging" value={WeaponInfo.charging || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">暴击：</div><input onChange={handleChangeInput} data-key="criticalRate" value={WeaponInfo.criticalRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">爆伤：</div><input onChange={handleChangeInput} data-key="criticalStrike" value={WeaponInfo.criticalStrike || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">物理：</div><input onChange={handleChangeInput} data-key="physicsReward" value={WeaponInfo.physicsReward || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">生命：</div><input onChange={handleChangeInput} data-key="hpRate" value={WeaponInfo.hpRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">描述：</div><textarea onChange={handleChangeInput} data-key="effect" className="textarea" value={WeaponInfo.effect || ""}></textarea> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">加成：</div><textarea onChange={handleChangeInput} data-key="addition" className="textarea" value={WeaponInfo.addition || ""}></textarea> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">技能：</div><textarea onChange={handleChangeInput} data-key="skill" className="textarea" value={WeaponInfo.skill || ""}></textarea> </div>
						<div className="InputsBox_item_btnbox">
							<button onClick={saveData} className="clobtn font_middle button button_blue">保存</button>
							<button onClick={CanelcreateWeapon} className="clobtn font_middle button button_red">取消</button>
						</div>
					</div>
				</div>
			</div>
			<div onClick={createWeapon} className="newWeapon">NEW+</div>
		</div>
	)
}

function Character(props) {
	const [ShowCreateW, setShowCreateW] = useState(false)
	const [ShowCreateSkill, setShowCreateSkill] = useState(false)
	const [TmpRate, setTmpRate] = useState(0)
	const [TmpId, setTmpId] = useState()
	const [SkillInfo, setSkillInfo] = useState({
		type: "physicsReward",
		rate: []
	})
	const [CharacterInfo, setCharacterInfo] = useState({
		criticalRate: 5,
		criticalStrike: 50,
		type: "magic",
		skill: []
	})
	let { Characters, changeCharacters } = props;
	const createCharacter = () => {
		setShowCreateW(true);
	}
	const CanelcreateCharacter = (e) => {
		e.stopPropagation();
		setShowCreateW(false);
	}
	const handleChangeInput = (e) => {
		let tmp = {};
		for (const key in CharacterInfo) {
			tmp[key] = CharacterInfo[key]
		}
		if (/\d/ig.test(e.target.value)) {
			e.target.value = Math.abs(parseFloat(e.target.value || 0)) - 0
		}
		tmp[e.target.dataset.key] = e.target.value;
		setCharacterInfo(tmp)
	}
	const CanelShowCreateSkill = (e) => {
		e.stopPropagation();
		setShowCreateSkill(false);
	}
	const handleSkillChange = (e) => {
		let tmp = {};
		for (const key in SkillInfo) {
			tmp[key] = SkillInfo[key]
		}
		tmp[e.target.dataset.key] = e.target.value;
		setSkillInfo(tmp)
	}
	const handleSkillTypeChange = (e) => {
		let tmp = {};
		for (const key in SkillInfo) {
			tmp[key] = SkillInfo[key]
		}
		if(tmp[e.target.dataset.key]) {
			if(!tmp[e.target.dataset.key].includes(e.target.value)) {
				tmp[e.target.dataset.key].push(e.target.value)
			}
		} else {
			tmp[e.target.dataset.key] = [e.target.value];
		}
		setSkillInfo(tmp)
	}
	const pushTmpRate = () => {
		if (/\d/.test(TmpRate) && TmpRate !== 0) {
			let tmp = {};
			for (const key in SkillInfo) {
				tmp[key] = SkillInfo[key]
			}
			let rate = Math.abs(TmpRate) - 0;
			tmp.rate = [...tmp.rate, rate]
			setSkillInfo(tmp)
			setTmpRate(0)
		}
	}
	const saveData = () => {
		if (!CharacterInfo.id) { CharacterInfo.id = new Date().getTime() }
		// Characters里查找是否有这个id
		let character = Characters.find(v => v.id === CharacterInfo.id)
		if (character) {  // 编辑
			for (const key in CharacterInfo) {
				character[key] = CharacterInfo[key]
			}
			changeCharacters([...Characters])
		} else {  // 新增
			let tmp = {};
			for (const key in CharacterInfo) {
				tmp[key] = CharacterInfo[key]
			}
			changeCharacters([...Characters, tmp])
		}
		setCharacterInfo({
			criticalRate: 5,
			criticalStrike: 50,
			type: "magic",
			skill: []
		})
		setShowCreateW(false);
	}

	const editWeapon = (id) => {
		let character = Characters.find(v => v.id === id)
		let tmp = {};
		for (const key in character) {
			tmp[key] = character[key]
		}
		setCharacterInfo(tmp)
		setShowCreateW(true);
	}

	const handleDlete = (id) => {
		let character = Characters.filter(v => v.id !== id)
		changeCharacters(character)
	}

	const handlePushSkillInfo = () => {
		if (TmpId && TmpId !== 0) {
			let character = Characters.find(v => v.id === TmpId)
			character.skill.push({ ...SkillInfo, key: new Date().getTime() })
			changeCharacters([...Characters])
			setSkillInfo({ type: "physicsReward", rate: [] })
		}
	}
	const deleteSkill = (id) => {
		if (TmpId && TmpId !== 0) {
			let character = Characters.find(v => v.id === TmpId)
			character.skill.splice(id, 1);
			changeCharacters([...Characters])
		}
	}
	return (
		<div className="weapon_container">
			{
				Characters.map(item => {
					return (
						<div className="weapon_box" key={item.id}>
							<div className="weapon_box_head">
								<div className="weapon_box_head_item">名称：{item.name || "未编辑"}</div>
								<div className="weapon_box_head_item">基础攻击：{item.base || 0}</div>
							</div>
							<div className="weapon_box_body">
								<div className="weapon_box_body_title">属性</div>
								{
									Object.keys(item).map(v => {
										if (!/id|name|base|skill/ig.test(v)) {
											return (
												<div key={v}>
													{Enums[v]} : {Enums[item[v]] ? Enums[item[v]] : item[v]}
												</div>
											)
										} else {
											return null
										}
									})
								}
							</div>
							<div onClick={() => { setTmpId(item.id); setShowCreateSkill(true) }} className="weapon_box_skill"> 天赋 </div>
							<div className="weapon_box_btn">
								<div onClick={() => editWeapon(item.id)} className="weapon_box_edit">编辑</div>
								<div onClick={() => handleDlete(item.id)} className="weapon_box_dele">删除</div>
							</div>
						</div>
					)
				})
			}
			<div className={ShowCreateW ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox">
						<button onClick={CanelcreateCharacter} className="font_small button button_red righttop">取消</button>
						<div className="InputsBox_item"><div className="InputsBox_item_font">角色：</div><input onChange={handleChangeInput} data-key="name" value={CharacterInfo.name || ""} className="input" type="text" /> </div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">类型：</div>
							<select onChange={handleChangeInput} data-key="type" value={CharacterInfo.type || ""} className="input">
								<option value="magic">{Enums["magic"]}</option>
								<option value="sword">{Enums["sword"]}</option>
								<option value="glaive">{Enums["glaive"]}</option>
								<option value="arch">{Enums["arch"]}</option>
								<option value="longHandle">{Enums["longHandle"]}</option>
							</select>
						</div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">生命：</div><input onChange={handleChangeInput} data-key="hp" value={CharacterInfo.hp || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">防御：</div><input onChange={handleChangeInput} data-key="defence" value={CharacterInfo.defence || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">暴击：</div><input onChange={handleChangeInput} data-key="criticalRate" value={CharacterInfo.criticalRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">爆伤：</div><input onChange={handleChangeInput} data-key="criticalStrike" value={CharacterInfo.criticalStrike || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">白字：</div><input onChange={handleChangeInput} data-key="base" value={CharacterInfo.base || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">攻率：</div><input onChange={handleChangeInput} data-key="atRate" value={CharacterInfo.atRate || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">精通：</div><input onChange={handleChangeInput} data-key="reaction" value={CharacterInfo.reaction || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">充能：</div><input onChange={handleChangeInput} data-key="charging" value={CharacterInfo.charging || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">物理：</div><input onChange={handleChangeInput} data-key="physicsReward" value={CharacterInfo.physicsReward || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["fire"]}：</div><input onChange={handleChangeInput} data-key="fire" value={CharacterInfo.fire || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["electric"]}：</div><input onChange={handleChangeInput} data-key="electric" value={CharacterInfo.electric || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["water"]}：</div><input onChange={handleChangeInput} data-key="water" value={CharacterInfo.water || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["ice"]}：</div><input onChange={handleChangeInput} data-key="ice" value={CharacterInfo.ice || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["wind"]}：</div><input onChange={handleChangeInput} data-key="wind" value={CharacterInfo.wind || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["rock"]}：</div><input onChange={handleChangeInput} data-key="rock" value={CharacterInfo.rock || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item"><div className="InputsBox_item_font">{Enums["treatment"]}：</div><input onChange={handleChangeInput} data-key="treatment" value={CharacterInfo.treatment || 0} className="input" type="number" /> </div>
						<div className="InputsBox_item_btnbox">
							<button onClick={saveData} className="clobtn font_middle button button_blue">保存</button>
							<button onClick={CanelcreateCharacter} className="clobtn font_middle button button_red">取消</button>
						</div>
					</div>
				</div>
			</div>
			<div className={ShowCreateSkill ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox">
						<button onClick={CanelShowCreateSkill} className="font_small button button_red righttop">取消</button>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">名称：</div>
							<input onChange={handleSkillChange} data-key="name" value={SkillInfo.name || ""} className="input" type="text" />
						</div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">类型：</div>
							<select onChange={handleSkillChange} data-key="type" value={SkillInfo.type || "physicsReward"} className="input">
								<option value="physicsReward">{Enums["physicsReward"]}</option>
								<option value="fire">{Enums["fire"]}</option>
								<option value="electric">{Enums["electric"]}</option>
								<option value="water">{Enums["water"]}</option>
								<option value="ice">{Enums["ice"]}</option>
								<option value="wind">{Enums["wind"]}</option>
								<option value="rock">{Enums["rock"]}</option>
							</select>
						</div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">招式类型：</div>
							<select onChange={handleSkillTypeChange} data-key="skillType" multiple value={[SkillInfo.skillType] || ["其他"]} className="input">
								<option value="普通攻击">普通攻击</option>
								<option value="重击">重击</option>
								<option value="下落攻击">下落攻击</option>
								<option value="e技能">e技能</option>
								<option value="q技能">q技能</option>
								<option value="其他">其他</option>
							</select>
						</div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">倍率：</div>
							<div className="InputsBox_item_rate">{(SkillInfo.rate||[]).join(" ")}</div>
							<input onChange={(e) => setTmpRate(Math.abs(parseFloat(e.target.value)) - 0)} value={TmpRate - 0} className="input input_small" type="number" />
							<button onClick={pushTmpRate} className="btn">+</button>
						</div>
						<div>
							{`当前招式类型: ${(SkillInfo.skillType || []).join(";")}`}
						</div>
						<div className="InputsBox_btn_item">
							<button onClick={handlePushSkillInfo} className="button button_blue button_long">插入</button>
							<button className="button button_blue button_long" onClick={() => setSkillInfo({ type: "physicsReward", rate: [] })}>清除</button>
						</div>
						<div>
							{
								Characters.find(v => v.id === TmpId) ?
									Characters.find(v => v.id === TmpId).skill.map((item, i) => {
										return (
											<div className="InputsBox_btn_item_list" key={item.key}>
												<div>{`招式${i+1}`}</div>
												<div>{item.name || ""}</div>
												<div>{Enums[item.type][0] || ""}</div>
												<div>{"招式类型:" + (item.skillType||[]).join(";") || ""}</div>
												<div>倍率:{(item.rate||[]).join(" ") || 0}</div>
												<div>合计:{sum(item.rate)}</div>
												<button onClick={() => deleteSkill(i)} className="button button_red right">删除</button>
											</div>
										)
									})
									: null
							}
						</div>
					</div>
				</div>
			</div>
			<div onClick={createCharacter} className="newWeapon">NEW+</div>
		</div>
	)
}

function Relic(props) {
	let secondProps = ["attack", "atRate", "criticalRate", "criticalStrike", "charging", "reaction", "defence", "defenceRate", "fixedhp", "hpRate"];
	const RelicsEnums = {
		flower: ["fixedhp"],
		plume: ["attack"],
		sandglass: ["atRate", "reaction","defenceRate","hpRate","charging"],
		cann: ["physicsReward", "fire", "electric", "water", "ice", "wind", "rock","atRate","reaction"],
		header: ["criticalRate", "criticalStrike", "atRate", "hpRate","defenceRate","reaction"],
	};
	
	let { Relics, changeRelics } = props
	const [ShowCreateW, setShowCreateW] = useState(false)
	const [RelicInfo, setRelicInfo] = useState({ type: "flower", mainProp: "fixedhp", mainValue: CLIPDATA_MAIN.fixedhp, second: [{}, {}, {}, {}] })
	const createRelic = () => {
		setShowCreateW(true);
	}
	const CanelcreateRelic = (e) => {
		e.stopPropagation();
		setShowCreateW(false);
	}
	const handleChangeType = (e) => {
		let tmp = {};
		for (const key in RelicInfo) {
			tmp[key] = RelicInfo[key]
		}
		tmp.type = e.target.value;
		setRelicInfo(tmp)
	}

	const handleChangeMainProp = useCallback((e) => {
		let tmp = {};
		for (const key in RelicInfo) {
			tmp[key] = RelicInfo[key]
		}
		tmp.mainProp = e.target.value;
		setRelicInfo(tmp)
	}, [RelicInfo])
	const handleChangeMainValue = (e) => {
		let tmp = {};
		for (const key in RelicInfo) {
			tmp[key] = RelicInfo[key]
		}
		tmp.mainValue = Math.abs(parseFloat(e.target.value || 0)) - 0;
		e.target.value = tmp.mainValue;
		setRelicInfo(tmp)
	}
	const handleChangeSecondProp = (e) => {
		if (e.target.value && e.target.value !== "") {
			let tmp = {};
			for (const key in RelicInfo) {
				tmp[key] = RelicInfo[key]
			}
			tmp.second[e.target.dataset.index].secondProp = e.target.value;
			tmp.second[e.target.dataset.index].secondValue = CLIPDATA_SECOND[e.target.value] || 0;
			setRelicInfo(tmp)
		}
	}
	const handleChangeSecondValue = (e) => {
		let tmpvalue = Math.abs(parseFloat(e.target.value || 0)) - 0;
		e.target.value = tmpvalue
		let tmp = {};
		for (const key in RelicInfo) {
			tmp[key] = RelicInfo[key]
		}
		tmp.second[e.target.dataset.index].secondValue = tmpvalue;
		setRelicInfo(tmp)
	}
	useEffect(() => {
		handleChangeMainProp({ target: { value: RelicsEnums[RelicInfo.type][0] } })
	}, [RelicInfo.type,])
	useEffect(() => {
		handleChangeMainValue({ target: { value: CLIPDATA_MAIN[RelicInfo.mainProp] } })
	}, [RelicInfo.mainProp])
	const saveData = () => {
		if (!RelicInfo.id) { RelicInfo.id = new Date().getTime() }
		// Relics里查找是否有这个id
		let weapon = Relics.find(v => v.id === RelicInfo.id)
		if (weapon) {  // 编辑
			for (const key in RelicInfo) {
				weapon[key] = RelicInfo[key]
			}
			changeRelics([...Relics])
		} else {  // 新增
			let tmp = {};
			for (const key in RelicInfo) {
				tmp[key] = RelicInfo[key]
			}
			changeRelics([...Relics, tmp])
		}
		setRelicInfo({ type: "flower", mainProp: "hp", mainValue: CLIPDATA_MAIN.hp, second: [{}, {}, {}, {}] })
		setShowCreateW(false);
	}

	const editWeapon = (id) => {
		let weapon = Relics.find(v => v.id === id)
		let tmp = {};
		for (const key in weapon) {
			tmp[key] = weapon[key]
		}
		setRelicInfo(tmp)
		setShowCreateW(true);
	}

	const handleDlete = (id) => {
		let weapon = Relics.filter(v => v.id !== id)
		changeRelics(weapon)
	}

	return (
		<div className="weapon_container">
			{
				Relics.map(item => {
					return (
						<div className="weapon_box" key={item.id}>
							<div className="weapon_box_head">
								<div className="weapon_box_head_item">类型：{Enums[item.type]}</div>
								<div className="weapon_box_head_item">{Enums[item.mainProp]}：{item.mainValue}</div>
							</div>
							<div>id:{item.id}</div>
							<div className="weapon_box_body">{
								item.second.map(v => {
									return (
										<div key={v.secondProp}>
											{Enums[v.secondProp]} : {v.secondValue || 0}
										</div>
									)
								})
							}</div>
							<div className="weapon_box_btn">
								<div onClick={() => editWeapon(item.id)} className="weapon_box_edit">编辑</div>
								<div onClick={() => handleDlete(item.id)} className="weapon_box_dele">删除</div>
							</div>
						</div>
					)
				})
			}
			<div className={ShowCreateW ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox">
						<button onClick={CanelcreateRelic} className="font_small button button_red righttop">取消</button>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">类型：</div>
							<select onChange={handleChangeType} value={RelicInfo.type || "flower"} className="input">
								<option value="flower">{Enums["flower"]}</option>
								<option value="plume">{Enums["plume"]}</option>
								<option value="sandglass">{Enums["sandglass"]}</option>
								<option value="cann">{Enums["cann"]}</option>
								<option value="header">{Enums["header"]}</option>
							</select>
						</div>
						<div className="InputsBox_item">
							<div className="InputsBox_item_font">主词：</div>
							<select onChange={handleChangeMainProp} value={RelicInfo.mainProp || ""} className="relic_main_key_select">
								{RelicsEnums[RelicInfo.type].map(v => {
									return <option key={v} value={v}>{Enums[v]}</option>
								})}
							</select>
							<input onChange={handleChangeMainValue} value={RelicInfo.mainValue || 0} className="input2" type="number" />
						</div>
						{
							RelicInfo.second.map((item, i) => {
								return <div key={i} className="InputsBox_item">
									<div className="InputsBox_item_font">副词：</div>
									<select onChange={handleChangeSecondProp} data-index={i} value={item.secondProp || ""} className="relic_main_key_select">
										<option value=""></option>
										{
											secondProps.filter(v => { return v !== RelicInfo.mainProp }).map(v => {
												return <option key={v} value={v}>{Enums[v]}</option>
											})
										}
									</select>
									<input onChange={handleChangeSecondValue} data-index={i} value={item.secondValue || 0} className="input2" type="number" />
								</div>
							})
						}
						<div className="InputsBox_item_btnbox">
							<button onClick={saveData} className="clobtn font_middle button button_blue">保存</button>
							<button onClick={CanelcreateRelic} className="clobtn font_middle button button_red">取消</button>
						</div>
					</div>
				</div>
			</div>
			<div onClick={createRelic} className="newWeapon">NEW+</div>
		</div>
	)
}

function renderCharacterInfo(info) {
	let tmp = [];
	for (const key in info) {
		if (!/id/.test(key) && /^\d+\.?\d*$/.test(info[key])) {
			let value = info[key];
			if (key === "type") { value = Enums[value] }
			tmp.push({ key, value })
		}
	}
	return (<>
		{tmp.map(item => <div className="info_item" key={item.key}>{Enums[item.key]}:{item.value}</div>)}
	</>)
}
function renderWeaponInfo(info) {
	let tmp = [];
	for (const key in info) {
		if (!/id/.test(key) && /^\d+\.?\d*$/.test(info[key])) {
			let value = info[key];
			if (key === "type") { value = Enums[value] }
			tmp.push({ key, value })
		}
	}
	return (<>
		{tmp.map(item => <div className="info_item" key={item.key}>{Enums[item.key]}:{item.value}</div>)}
		<div className="weapon_effect">描述:{info.effect}</div>
		<div className="weapon_effect">加成:{info.addition}</div>
		<div className="weapon_effect">技能:{info.skill}</div>
	</>)
}

function RenderMoni(info) {
	const RelicsSuitEffects = RelicsSuit
	const {TheNowData, RelicsInfo} = info
	const [SelectRelic, setSelectRelic] = useState([0]);
	const [ShowCreateCombo, setShowCreateCombo] = useState(false)
	const [ComboList, setComboList] = useState([])
	const [KangXing, setKangXing] = useState(10);
	const [EnemyLv, setEnemyLv] = useState(90);
	const [YourLv, setYourLv] = useState(90);
	const [Combination, setCombination] = useState([]);
	const [RetStr, setRetStr] = useState([]);
	const AmgtypeMaster = ["physicsReward","fire","water","wind","ice","electric","rock"].sort((a,b) => TheNowData[b] - TheNowData[a])[0]

	const [Combo, setCombo] = useState([
		{
			type: AmgtypeMaster,
			rate: 100,
			name: "测试",
		}
	]);

	// const [AutoCalcDmg, setAutoCalcDmg] = useState({});
	
	const CanelcreateCombo = (e) => {
		e.stopPropagation();
		setShowCreateCombo(false);
	}

	const handleDeleCombo = (e) => {
		let index = e.target.dataset.index - 0;
		setCombo(Combo.filter((_,i) => i!==index))
	}

	const handleAddCombo = () => {
		let tmp = []
		TheNowData.skill.forEach(skill => {
			if(skill.rate.length == 1) {
				tmp.push({...skill, rate:skill.rate[0], name:skill.name})
			} else {
				skill.rate.forEach((rate,i) => {
					tmp.push({...skill, rate, name:skill.name+(i+1)+"段"})
				})
			}
		})
		setComboList(tmp)
		setShowCreateCombo(true);
	}

	const SelectCombo = (i) => {
		if( ComboList[i].flag ) {
			ComboList[i].flag = !ComboList[i].flag
		} else {
			ComboList[i].flag = true
		}
		setComboList([...ComboList])
	}

	const saveCombo = (e) => {
		let combos = ComboList.filter(v => v.flag)
		if(combos.length > 0) {
			setCombo([...Combo,...combos])
		}
		setComboList([])
		setShowCreateCombo(false);
	}

	const SelectRelicssuit = (i) => {
		if(!SelectRelic.includes(i)) {
			if(SelectRelic.length >= 2) {
				setSelectRelic([SelectRelic[1], i])
			} else {
				setSelectRelic([...SelectRelic, i])
			}
		} else {
			setSelectRelic(SelectRelic.filter(v => v!==i))
		}
	}
	const handleChangeKangXing = (e) => {
		if(/!\d/.test(e.target.value) ) {
			e.target.value = 0
		}
		setKangXing(e.target.value - 0)
	}
	const handleChangeEnemyLv = (e) => {
		if(/!\d/.test(e.target.value) ) {
			e.target.value = 0
		}
		setEnemyLv(e.target.value - 0)
	}
	const handleChangeYourLv = (e) => {
		if(/!\d/.test(e.target.value) ) {
			e.target.value = 0
		}
		setYourLv(e.target.value - 0)
	}
	const ClipsQpl = () => { // 圣遗物副词条全排列
		let chance = 5;   // 每个圣遗物副词条强化好词条的机会
		let tmp = {}
		for (let RelicsKey in RelicsInfo) {
			let RelicsData = RelicsInfo[RelicsKey]
			let {second} = RelicsData;
			second.forEach(v => {
				if(tmp[v.secondProp]) {
					tmp[v.secondProp] += 1
				} else {
					tmp[v.secondProp] = 1
				}
			})
		}

		let combination = getCombination(Array(5*chance + 1).fill().map((_,i)=>i), chance, Object.entries(tmp))
		setCombination(combination)
	}
	const calc = () => {
		if(Combination && Combination.length > 0) {
			// 副词条各种情况排列
			let dmgs = Combination.map(item => {
				let tmpSecondData = {}  // 副词条数据
				for (let key in item) {
					tmpSecondData[key] = item[key] * CLIPDATA_SECOND[key]
				}
				let tmpdata = objValueAdd([TheNowData, tmpSecondData]);
				if(tmpdata.addition) {  // 武器加成
					let fn = eval(`(${tmpdata.addition})`)
					if(/function/ig.test(typeof fn) ){
						fn(tmpdata)
					} else {
						tmpdata = objValueAdd([tmpdata, fn])
					}
				}
				let ret = { point: 0, combo:[],rate:0, tmpSecondData, attack: getAtNow(tmpdata), hp:getHpNow(tmpdata), def:getDefNow(tmpdata) };
				let changedata = {};    // 临时数据改动
				Combo.forEach(skill => {
					if(skill.changedata) {
						for (let par in skill.changedata) {
							let iem = skill.changedata[par]
							if(/string/ig.test(typeof iem) ) {
								let fn = eval(iem);
								changedata[par] = fn(objValueAdd([TheNowData, tmpSecondData]))
							}
						}
						changedata = objValueAdd([changedata, skill.changedata])
					}
					// 一些变量
					let reactionQ = 1.5;   // 元素反应倍率
					let reactionDmgAdd = 0.15;  // 元素反应加成
					let rmDef = 0;   // 减防
					let enemy_def = reduceResistanceK(KangXing) * lvSuppressK(YourLv, EnemyLv, rmDef); // 敌人抗性防御减伤
					let other_area = 1;  //其他额外乘伤区间

					// 计算
					let itemDmg = {}; // 记录各种伤害
					let data = objValueAdd([TheNowData, tmpSecondData, changedata]); // 合并常驻data
					if(data.addition) {  // 武器加成
						let fn = eval(`(${data.addition})`)
						if(/function/ig.test(typeof fn) ){
							fn(data)
						} else {
							data = objValueAdd([data, fn])
						}
					}
					let dmgRate = data[skill.type] + data.damageRate;  // 增伤区间计算
					ret.data = data;
					if(/fire|ice|water/ig.test(skill.type)){
						let rea = { reaction:data.reaction, reactionQ, reactionDmgAdd }
						itemDmg = getDmg({ data:{...data,dmgRate}, rate: skill.rate/100 , rea, enemy_def, other_area}) 
					} else {
						itemDmg = getDmg({ data:{...data,dmgRate}, rate: skill.rate/100 , enemy_def, other_area}) 
					}
					ret.rate += skill.rate;
					ret.point += itemDmg.qwRea || itemDmg.qw  // 默认按照暴击期望伤害排序
					ret.combo.push({itemDmg, skill})
				})
				return ret
			})
			dmgs.sort((a,b) => b.point - a.point)

			console.log(dmgs[0]); // 数据展示
			
			let strarr = []
			let str = "圣遗物副词条:"
			Object.entries(dmgs[0].tmpSecondData).forEach(item => {
				str += `${Enums[item[0]]}:${item[1]} `
			})
			strarr.push(str)
			strarr.push("连段总期望伤害:" + dmgs[0].point)
			strarr.push("连段总倍率:" + dmgs[0].rate)
			strarr.push("角色数据：")
			strarr.push("攻击力:" + dmgs[0].attack)
			strarr.push("双爆:" + dmgs[0].data.criticalRate.toFixed(2) + "% " + dmgs[0].data.criticalStrike.toFixed(2) + "%")
			strarr.push("增伤:" + dmgs[0].data.damageRate)
			let {fire, water, ice, electric, rock, wind, physicsReward } = dmgs[0].data
			strarr.push("" + `火:${fire} 水${water} 冰${ice} 雷${electric} 岩${rock} 风${wind} 物${physicsReward}`)
			strarr.push("精通:" + dmgs[0].data.reaction)
			
			dmgs[0].combo.forEach(comb => {
				strarr.push(`${comb.skill.name} : 暴击期望伤害:${comb.itemDmg.qw}  只看爆伤伤害:${comb.itemDmg.bj}`)
			})

			setRetStr(strarr)
		}
	}
	return (
		<>
			<div className={ShowCreateCombo ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox InputsBoxFlex">
						{
							ComboList.map((item, i) => {
								return <div onClick={() => SelectCombo(i)} className={item.flag? "relicssuititem relicssuititemSelect float": "relicssuititem float"} key={i}>
									<div>名称: {item.name}</div>
									<div>类型: {Enums[item.type] || "无"} &nbsp; {(item.skillType||[]).join(" ")}</div>
									<div>倍率: {item.rate}</div>
								</div>
							})
						}
						<div className="InputsBox_item_btnbox clearFloat">
							<button onClick={saveCombo} className="clobtn font_middle button button_blue">保存</button>
							<button onClick={CanelcreateCombo} className="clobtn font_middle button button_red">取消</button>
						</div>
					</div>
				</div>
			</div>
			<div className="mockcalc_title"> 圣遗物套装效果选择(暂未实装)</div>
			<div className="relics_container">
				{
					RelicsSuitEffects.map((item, i) => {
						return <div onClick={() => SelectRelicssuit(i)} className={SelectRelic.includes(i)? "relicssuititem relicssuititemSelect": "relicssuititem"} key={i}>
							<div>名称: {item.name}</div>
							<div>描述: {item.des}</div>
						</div>
					})
				}
			</div>
			<div className="mockcalc_title">敌人抗性和等级以及你得等级</div>
			<div>
				<div>
					敌人抗性: <input className="input" onChange={handleChangeKangXing} type="number" value={KangXing}/>
				</div>
				<div>
					敌人等级: <input className="input" onChange={handleChangeEnemyLv} type="number" value={EnemyLv}/>
				</div>
				<div>
					你的等级: <input className="input" onChange={handleChangeYourLv} type="number" value={YourLv}/>
				</div>
			</div>
			<div  className="kaishimoni">
				<button onClick={ClipsQpl} className={`button button_blue button_long btn_moni${Combination.length>0? " hide" : ""}`}>计算圣遗物副词条全排列</button>
			</div>
			<div>
				<div className="mockcalc_title">连段模拟(编辑内容暂未实装 可以删除和添加)</div>
				<div>
					{
						Combo.map((skill,i) => {
							return <div key={i}>
								{skill.name}：
								伤害类型:
								<select data-key="type" value={skill.type || ""} className="input input_small">
									<option value="fire">{Enums["fire"]}</option>
									<option value="water">{Enums["water"]}</option>
									<option value="ice">{Enums["ice"]}</option>
									<option value="electric">{Enums["electric"]}</option>
									<option value="wind">{Enums["wind"]}</option>
									<option value="rock">{Enums["rock"]}</option>
									<option value="physicsReward">{Enums["physicsReward"]}</option>
								</select>
								其他类型: {(skill.skillType||["无"]).join(" ")} 
								&nbsp;该段倍率: <input type="number" className="input input_small" value={skill.rate} /> % &nbsp;
								<button className="btn button">释放后数值临时变动</button> &nbsp;
								<button onClick={handleDeleCombo} data-index={i} className="button button_red">删除此段数</button>
							</div>
						})
					}
					<div onClick={handleAddCombo} className="tianjialianduan">+添加连段</div>
				</div>
				<div className="kaishimoni"><button onClick={calc} className="btn button button_long">计算</button></div>
			</div>
			<div>{RetStr.map((v,i) => {
				return <p key={i}>
					{v}
				</p>
			})}</div>
		</>
	)
}

function MockCalc(props) {
	const [ShowCreateW, setShowCreateW] = useState(false)
	const createWeapon = () => {
		setShowCreateW(true);
	}
	const CanelcreateWeapon = (e) => {
		e.stopPropagation();
		setShowCreateW(false);
	}
	let { Weapons, Characters, Relics } = props;
	const [LastData, setLastData] = useState({ hp: 0, fixedhp:0, hpRate: 0, defence: 0, defenceRate: 0, base: 0, attack: 0, atRate: 0, criticalRate: 0, criticalStrike: 0, physicsReward: 0, fire: 0, electric: 0, water: 0, ice: 0, wind: 0, rock: 0, treatment: 0, charging: 0, reaction: 0, damageRate: 0 })
	const [ShowLastData, setShowLastData] = useState(false);
	const [MoniStart, setMoniStart] = useState();
	const [TheNowData, setTheNowData] = useState({});
	const [CharacterInfo, setCharacterInfo] = useState({});
	const [WeaponInfo, setWeaponInfo] = useState({});
	const [RelicsInfo, setRelicsInfo] = useState({ flower: deepCopy(Relics[0]||{}), plume: deepCopy(Relics[1]||{}), sandglass: deepCopy(Relics[2]||{}), cann: deepCopy(Relics[3]||{}), header: deepCopy(Relics[4]||{}), });
	
	const selectCharacter = (e) => {
		if (e.target.value && e.target.value !== "") {
			let character_tmp = Characters.find(v => v.id === (e.target.value - 0))
			setCharacterInfo(JSON.parse(JSON.stringify(character_tmp)))
			if (WeaponInfo.type && character_tmp.type !== WeaponInfo.type) {
				setWeaponInfo({})
			}
		}
	}
	const selectWeapon = (e) => {
		if (e.target.value && e.target.value !== "") {
			let weapon_tmp = Weapons.find(v => v.id === (e.target.value - 0))
			setWeaponInfo(JSON.parse(JSON.stringify(weapon_tmp)))
		}
	}

	const getLastValue = (key) => {
		let character_value = 0;
		if (CharacterInfo[key]) { character_value = CharacterInfo[key] - 0 }
		let weapon_value = 0;
		if (WeaponInfo[key]) { weapon_value = WeaponInfo[key] - 0 }
		// 圣遗物
		let relics_value = 0;
		Object.values(RelicsInfo).forEach(info => {
			if (info.mainProp === key && info.mainValue) {
				relics_value += (info.mainValue || 0)
			}
			if (info.second && info.second.length) {
				info.second.forEach(item => {
					if (item.secondProp === key && item.secondValue) {
						relics_value += (item.secondValue || 0)
					}
				})
			}
		})
		return LastData[key] + character_value + weapon_value + relics_value;
	}
	
	const handleChangeInput = (e) => {
		let tmp = {};
		for (const key in LastData) {
			tmp[key] = LastData[key]
		}
		e.target.value = Math.abs(parseFloat(e.target.value || 0)) - 0
		tmp[e.target.dataset.key] = e.target.value - 0;
		setLastData(tmp)
	}

	const handleSelect = (e) => {
		if (e.target.value && e.target.value !== "") {
			let tmp = JSON.parse(JSON.stringify(RelicsInfo))
			tmp[e.target.dataset.key] = Relics.find(v => v.id === (e.target.value - 0))
			setRelicsInfo(tmp)
		}
	}
	
	const Moni = () => {
		// 解析当前圣遗物数值
		let relicsData = {};
		Object.values(RelicsInfo).forEach(item => {
			if(item.mainProp && item.mainValue){
				if(relicsData[item.mainProp]) {
					relicsData[item.mainProp] += item.mainValue
				} else {
					relicsData[item.mainProp] = item.mainValue;
				}
			}
			if(item.second && item.second.length > 0) {
				item.second.forEach(item2 => {
					if(item2.secondProp && item2.secondValue){
						if(relicsData[item2.secondProp]) {
							relicsData[item2.secondProp] += item2.secondValue
						} else {
							relicsData[item2.secondProp] = item2.secondValue;
						}
					}
				})
			}
		})

		let NowData = objValueAdd([CharacterInfo, WeaponInfo, relicsData,LastData])
		
		setTheNowData(NowData)
		setMoniStart(true)
	}

	return MoniStart? 
		(<div className="button_long">
			<RenderMoni TheNowData={TheNowData} RelicsInfo={RelicsInfo} />
		</div>) : (
		<div>
			<div className="mockcalc_title">角色切换</div>
			<div className="mockcalc_character_container">
				<div className="mockcalc_character_select_box">
					<div className="mockcalc_character_select_box_title">角色选择</div>
					<div>
						<select onChange={selectCharacter} className="mockcalc_character_select">
							<option value=""></option>
							{
								Characters.map(item => {
									return <option key={item.id} value={item.id}>{item.name}</option>
								})
							}
						</select>
					</div>
				</div>
				<div className="infobox">
					{renderCharacterInfo(CharacterInfo)}
				</div>
			</div>
			<div className="mockcalc_title">武器切换</div>
			<div className="mockcalc_character_container">
				<div className="mockcalc_character_select_box">
					<div className="mockcalc_character_select_box_title">武器切换</div>
					<div>
						<select onChange={selectWeapon} className="mockcalc_character_select">
							<option value=""></option>
							{
								Weapons.filter(item => item.type === CharacterInfo.type).map(item => {
									return <option key={item.id} value={item.id}>{item.name}</option>
								})
							}
						</select>
					</div>
				</div>
				<div className="infobox">
					{renderWeaponInfo(WeaponInfo)}
				</div>
			</div>

			<div className="mockcalc_title">圣遗物</div>
			<div className="relics_container">
				<div className="relics_item">
					<div className="relics_title">生之花</div>
					<div className="relics_head">
						<div className="relics_head_left">
							选择: <select onChange={handleSelect} data-key="flower">
								<option></option>
								{
									Relics.filter(v => v.type === "flower").map(item => {
										return <option key={item.id} value={item.id}>id:...{String(item.id).substr(-4, 4)}</option>
									})
								}
							</select>
						</div>
						<div className="relics_head_right">{RelicsInfo.flower.mainProp ? Enums[RelicsInfo.flower.mainProp] : "主词条"}:{RelicsInfo.flower.mainValue || 0}</div>
					</div>
					<div className="relics_body">
						<div>id:{RelicsInfo.flower.id || ""}</div>
						{
							RelicsInfo.flower.second ? RelicsInfo.flower.second.map((item, i) => {
								return <div key={i}>{Enums[item.secondProp]}:{item.secondValue}</div>
							}) : null
						}
					</div>
				</div>
				<div className="relics_item">
					<div className="relics_title">死之羽</div>
					<div className="relics_head">
						<div className="relics_head_left">
							选择: <select onChange={handleSelect} data-key="plume">
								<option></option>
								{
									Relics.filter(v => v.type === "plume").map(item => {
										return <option key={item.id} value={item.id}>id:...{String(item.id).substr(-4, 4)}</option>
									})
								}
							</select>
						</div>
						<div className="relics_head_right">{RelicsInfo.plume.mainProp ? Enums[RelicsInfo.plume.mainProp] : "主词条"}:{RelicsInfo.plume.mainValue || 0}</div>
					</div>
					<div className="relics_body">
						<div>id:{RelicsInfo.plume.id || ""}</div>
						{
							RelicsInfo.plume.second ? RelicsInfo.plume.second.map((item, i) => {
								return <div key={i}>{Enums[item.secondProp]}:{item.secondValue}</div>
							}) : null
						}
					</div>
				</div>
				<div className="relics_item">
					<div className="relics_title">时之沙</div>
					<div className="relics_head">
						<div className="relics_head_left">
							选择: <select onChange={handleSelect} data-key="sandglass">
								<option></option>
								{
									Relics.filter(v => v.type === "sandglass").map(item => {
										return <option key={item.id} value={item.id}>id:...{String(item.id).substr(-4, 4)}</option>
									})
								}
							</select>
						</div>
						<div className="relics_head_right">{RelicsInfo.sandglass.mainProp ? Enums[RelicsInfo.sandglass.mainProp] : "主词条"}:{RelicsInfo.sandglass.mainValue || 0}</div>
					</div>
					<div className="relics_body">
						<div>id:{RelicsInfo.sandglass.id || ""}</div>
						{
							RelicsInfo.sandglass.second ? RelicsInfo.sandglass.second.map((item, i) => {
								return <div key={i}>{Enums[item.secondProp]}:{item.secondValue}</div>
							}) : null
						}
					</div>
				</div>
				<div className="relics_item">
					<div className="relics_title">空之杯</div>
					<div className="relics_head">
						<div className="relics_head_left">
							选择: <select onChange={handleSelect} data-key="cann">
								<option></option>
								{
									Relics.filter(v => v.type === "cann").map(item => {
										return <option key={item.id} value={item.id}>id:...{String(item.id).substr(-4, 4)}</option>
									})
								}
							</select>
						</div>
						<div className="relics_head_right">{RelicsInfo.cann.mainProp ? Enums[RelicsInfo.cann.mainProp] : "主词条"}:{RelicsInfo.cann.mainValue || 0}</div>
					</div>
					<div className="relics_body">
						<div>id:{RelicsInfo.cann.id || ""}</div>
						{
							RelicsInfo.cann.second ? RelicsInfo.cann.second.map((item, i) => {
								return <div key={i}>{Enums[item.secondProp]}:{item.secondValue}</div>
							}) : null
						}
					</div>
				</div>
				<div className="relics_item">
					<div className="relics_title">理之冠</div>
					<div className="relics_head">
						<div className="relics_head_left">
							选择: <select onChange={handleSelect} data-key="header">
								<option></option>
								{
									Relics.filter(v => v.type === "header").map(item => {
										return <option key={item.id} value={item.id}>id:...{String(item.id).substr(-4, 4)}</option>
									})
								}
							</select>
						</div>
						<div className="relics_head_right">{RelicsInfo.header.mainProp ? Enums[RelicsInfo.header.mainProp] : "主词条"}:{RelicsInfo.header.mainValue || 0}</div>
					</div>
					<div className="relics_body">
						<div>id:{RelicsInfo.header.id || ""}</div>
						{
							RelicsInfo.header.second ? RelicsInfo.header.second.map((item, i) => {
								return <div key={i}>{Enums[item.secondProp]}:{item.secondValue}</div>
							}) : null
						}
					</div>
				</div>
			</div>

			<div onClick={createWeapon} className="mockcalc_title click"> 自定义增加面板 </div>
			<div className={ShowCreateW ? "show" : "hide"}>
				<div className="mderContainer">
					<div className="InputsBox">
						<button onClick={CanelcreateWeapon} className="font_small button button_red righttop">取消</button>
						{
							Object.keys(LastData).map(key => {
								return (
									<div key={key} className="InputsBox_item">
										<div className="InputsBox_item_font">{Enums[key]}：</div>
										<input onChange={handleChangeInput} data-key={key} value={LastData[key] || 0} className="input" type="number" />
									</div>
								)
							})
						}
						<div className="InputsBox_item_btnbox">
							<button onClick={CanelcreateWeapon} className="clobtn font_middle button button_red">返回</button>
						</div>
					</div>
				</div>
			</div>
			<div className="mockcalc_title">面板</div>
			<div className="mockcalc_sh">
				<div onClick={() => setShowLastData(!ShowLastData)} className="ShowLastDataBox">{ShowLastData ? "收缩" : "展开"}</div>
				<div className={ShowLastData ? "mockcalc_container" : "mockcalc_container mockcalc_container_hide"}>
					{
						Object.keys(LastData).map(key => {
							return (
								<div key={key} className="mockcalc_container_row">
									<div className="mockcalc_container_row_key">{Enums[key]}</div>
									<div className="mockcalc_container_row_value">{getLastValue(key)}</div>
								</div>
							)
						})
					}
				</div>
			</div>
			<div className="mockcalc_title">招式</div>
			<div>
				{
					CharacterInfo.skill ? CharacterInfo.skill.map((item, i) => {
						return (<div className="cinfo_skill_container" key={item.key}>
							<div className="cinfo_skill_title">{item.name || `天赋${i + 1}`} 伤害类型:{Enums[item.type]}</div>
							<div className="cinfo_skill_title">招式类型:{item.skillType.join(";")}</div>
							<div className="center">倍率:{item.rate.join(" ")}</div>
						</div>)
					}) : null
				}
			</div>
			<div className="kaishimoni">
				<button onClick={Moni} className="button button_blue button_long btn_moni">根据此数值开始模拟</button>
			</div>
			<div className="foot"></div>
		</div>
	)
}

function App() {
	const TitleE = {
		"1": "武器",
		"2": "角色",
		"3": "圣遗物",
		"4": "模拟"
	}
	const [MenuPage, setMenuPage] = useState(getData("MenuPage") || "1")
	const [Weapons, setWeapons] = useState(JSON.parse(getData("Weapons") || "[]"))
	const [Characters, setCharacters] = useState(JSON.parse(getData("Characters") || "[]"))
	const [Relics, setRelics] = useState(JSON.parse(getData("Relics") || "[]"))
	const menuChange = useCallback((v) => {
		setMenuPage(() => v);
		saveData({ MenuPage: v })
	}, [])
	const changeWeapons = useCallback((v) => {
		setWeapons(() => v);
		saveData({ Weapons: v })
	}, [])
	const changeCharacters = useCallback((v) => {
		setCharacters(() => v);
		saveData({ Characters: v })
	}, [])
	const changeRelics = useCallback((v) => {
		setRelics(() => v);
		saveData({ Relics: v })
	}, [])
	useEffect(() => {
		setMenuPage(() => MenuPage)
	}, [MenuPage])

	const clearData = () => {
		window.localStorage.clear();
		window.location.reload();
	}

	const savePreData = () => {
		window.localStorage.clear();
		saveData(PreData)
		window.location.reload();
	}

	return (
		<div className="App">
			<div className="head">
				{TitleE[MenuPage]}
				<div className="head_btn">
					<button onClick={savePreData}>导入数据</button>
					<button onClick={clearData}>清除缓存</button>
				</div>
			</div>
			<div className="main">
				<div className={MenuPage === "1" ? "show" : "hide"}>{Weapon({ Weapons, changeWeapons })}</div>
				<div className={MenuPage === "2" ? "show" : "hide"}>{Character({ Characters, changeCharacters })}</div>
				<div className={MenuPage === "3" ? "show" : "hide"}>{Relic({ Relics, changeRelics })}</div>
				<div className={MenuPage === "4" ? "show" : "hide"}>{MockCalc({ Weapons, Characters, Relics })}</div>
			</div>
			<div className="menu">
				<div onClick={() => menuChange("1")} className={MenuPage === "1" ? "menu_item menu_item_active" : "menu_item"}>武器</div>
				<div onClick={() => menuChange("2")} className={MenuPage === "2" ? "menu_item menu_item_active" : "menu_item"}>角色</div>
				<div onClick={() => menuChange("3")} className={MenuPage === "3" ? "menu_item menu_item_active" : "menu_item"}>圣遗物</div>
				<div onClick={() => menuChange("4")} className={MenuPage === "4" ? "menu_item menu_item_active" : "menu_item"}>模拟</div>
			</div>
		</div>
	);
}

function saveData(props) {
	for (let key in props) {
		let value = props[key];
		if (!/string|number/ig.test(typeof value)) {
			value = JSON.stringify(value)
		}
		window.localStorage.setItem(key, value)
	}
}

function getData(key) {
	return window.localStorage[key]
}

function sum(arr) {
	if (arr.length > 0) {
		return arr.reduce((a, b) => (a + b))
	} else {
		return 0
	}
}

/**
 * 伤害计算
 * @param {Object{data, rate, rea}} any 
 * @returns {Object{qw, bj}} 
 * getDmg({data, rate:2.1}) => {qw , bj}
 */
 function getDmg({data, rate=1, rea,  enemy_def, other_area}){
    let {criticalRate,criticalStrike,dmgRate,base,atRate,attack} = data
    if(criticalRate > 100){criticalRate = 100}
    let baseat = base * (1 + atRate / 100) + attack;
    let bdmg = baseat * (1 + criticalStrike / 100);
    let bdps = (criticalRate * 10 * bdmg + (1000 - criticalRate * 10) * baseat) / 1000
    let adddmg = bdps * (1 + dmgRate / 100)
    let adddmgBj = bdmg * (1 + dmgRate / 100)
    if(rea){
        let {reaction, reactionQ, reactionDmgAdd} = rea
        let tmp = 1 + reactionDmgAdd + (278*reaction/(reaction+1400)) / 100;
        return {
			qw: adddmg * rate * enemy_def * other_area,
			bj: adddmgBj * rate * enemy_def * other_area,
            qwRea: adddmg * rate * reactionQ * tmp * enemy_def * other_area,
            bjRea: adddmgBj * rate * reactionQ * tmp * enemy_def * other_area
        }
    }
    return {
        qw: adddmg * rate * enemy_def * other_area,
        bj: adddmgBj * rate * enemy_def * other_area
    }
}

/**
 * 抗性减伤系数
 * @param {Number} 抗性 
 * @returns {Number} 系数
 * reduceResistanceK(10)  =>  0.9
 */
function reduceResistanceK (resistance) {
    if(resistance < 0) {
        return 1 - resistance/200
    } else if (resistance >=0 && resistance < 75){
        return 1 - resistance/100
    } else {
        return 1/(1+resistance/100*4)
    }
}

/**
 * 等级压制减伤系数
 * @param {Number, Number, Number} 你的等级  敌人的等级  减防 
 * @returns {Number} 系数
 * lvSuppressK(90, 100, 23)  =>  0.5523255813953488
 */
function lvSuppressK(youLv=0, eLv=0, td){
    return (100+youLv)/(100+youLv+(100+eLv)*(td? (100-td)/100 : 1))
}


/**
 * 对象数值增加 返回新对象
 * @param {Array} 
 * @returns {Object} 
 * objValueAdd([obj])  =>  obj
 */
function objValueAdd(ObjArr) {
    let ret = {}
    ObjArr.forEach(obj => {
        for (let key in obj) {
			if(key !== "id") {
				if(!ret.hasOwnProperty(key)) {
					ret[key] = obj[key]
				} else if(/^\d+\.?\d*$/.test(obj[key])) {
					ret[key] += obj[key]
				} 
			}
        }
    })
    return ret
}

function deepCopy(obj){
	return JSON.parse(JSON.stringify(obj))
}

function getHpNow(obj) {
	return (obj.hp || 0) * (1 + obj.hpRate/100) + (obj.fixedhp || 0)
}

function getAtNow(obj) {
	return (obj.base || 0) * (1 + obj.atRate/100) + (obj.attack || 0)
}

function getDefNow(obj) {
	return (obj.defence || 0) * (1 + obj.defenceRate/100)
}

// 副词全排列算法
function getCombination (arr, chance, entrys) {
    let num = 5
    var r = [];
    (function f(t, a, n) {
        if (n === 0) {
            if(t.reduce((a1,b1) => a1+b1) !== chance * 5){return}
            let ret = {}
            for (let i in t) {
                if(t[i] > entrys[i][1]*chance){return}
                ret[entrys[i][0]] = t[i]
            }
            r.push(ret)
            return ;
        }
        for (var i = 0, l = a.length; i < l; i++) {
            f(t.concat(a[i]), a, n - 1);
        }
    })([], arr, num);
    return r;
}

export default App;
